<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商场消防云平台 - 火灾报警系统</title>
    <script src="js/jquery-3.7.1.js"></script>
    <style>
        /* 页面基础样式 */
        body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f5f5f5; }
        .header { background-color: #409EFF; color: white; padding: 20px; display: flex; justify-content: space-between; align-items: center; }
        .nav { background-color: #333; overflow: hidden; display: flex; }
        .nav a { color: white; padding: 14px 16px; text-decoration: none; font-size: 17px; }
        .nav a:hover { background-color: #ddd; color: black; }
        .nav a.active { background-color: #f44336; color: white; }
        .container { padding: 20px; max-width: 1200px; margin: 0 auto; }

        /* 表格样式 */
        .alarm-table, .env-table { width: 100%; border-collapse: collapse; margin-top: 20px; background-color: white; box-shadow: 0 0 5px rgba(0,0,0,0.1); }
        .alarm-table th, .alarm-table td, .env-table th, .env-table td { border: 1px solid #ddd; padding: 12px 8px; text-align: left; }
        .alarm-table th, .env-table th { background-color: #f2f2f2; font-weight: bold; }

        /* 状态样式 */
        .status-alert { color: red; font-weight: bold; }
        .status-normal { color: green; }

        /* 按钮样式 */
        .operation-btn { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; margin-right: 5px; }
        .edit-btn { background-color: #409EFF; color: white; }
        .delete-btn { background-color: #f44336; color: white; }
        .handle-btn { background-color: #ff9800; color: white; }
        .relate-btn { background-color: #4CAF50; color: white; }
        .view-btn { background-color: #9C27B0; color: white; }
        .add-btn { padding: 8px 20px; background-color: #67c23a; color: white; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 10px; font-size: 14px; }

        /* 输入区域样式 */
        .input-section { background-color: white; box-shadow: 0 0 5px rgba(0,0,0,0.1); border-radius: 8px; padding: 20px; margin-bottom: 20px; }
        .input-section h3 { margin-top: 0; margin-bottom: 15px; font-size: 18px; border-left: 5px solid #409EFF; padding-left: 10px; }
        .input-section .form-group { margin-bottom: 15px; }
        .input-section label { display: block; margin-bottom: 5px; font-weight: bold; }
        .input-section input, .input-section select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
        .env-operation-btn { padding: 4px 10px; margin-right: 5px; }

        /* 弹窗样式 */
        .modal-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 999; }
        .modal { width: 500px; background: #fff; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.2); overflow: hidden; }
        .modal-header { padding: 15px; background-color: #f8f9fa; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
        .modal-close { cursor: pointer; font-size: 20px; }
        .modal-body { padding: 20px; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
        .form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
        .modal-footer { padding: 15px; background-color: #f8f9fa; border-top: 1px solid #ddd; text-align: right; }
        .btn-save { background-color: #409EFF; color: white; padding: 8px 20px; border: none; border-radius: 4px; cursor: pointer; }
        .btn-cancel { background-color: #ccc; color: #333; padding: 8px 20px; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; }

        /* 预案查看弹窗 */
        .plan-view-modal { width: 800px; }
        .plan-content { line-height: 1.6; white-space: pre-line; }
    </style>
</head>
<body>
<div class="header">
    <h1>商场消防云平台</h1>
    <div><a href="LogoutServlet">退出登录</a></div>
</div>

<div class="nav">
    <a href="main.jsp">首页</a>
    <a href="fire_alarm_list.jsp" class="active">火灾报警系统</a>
    <a href="equipment_management.jsp">消防设备管理系统</a>
    <a href="inspection_system.jsp" >设备巡检系统</a>
    <a href="video_monitoring.jsp">视频监控系统</a>
    <a href="emergency_plan.jsp">应急预案管理</a>
    <%
        String role = (String) session.getAttribute("role");
        if ("管理人员".equals(role)) {
    %>
    <a href="duty_staff.jsp">检查人员管理</a>
    <a href="system.jsp">系统设置</a>

    <% } %>
    <a href="change_password.jsp">修改密码</a>
</div>

<div class="container">
    <h2>火灾报警系统</h2>

    <!-- 环境参数区域 -->
    <div class="input-section">
        <h3>环境参数管理</h3>
        <div class="form-group">
            <label for="searchEnvArea">搜索区域：</label>
            <input type="text" id="searchEnvArea" placeholder="输入区域名称搜索">
            <button class="add-btn" style="margin-left: 10px" onclick="searchEnvParams()">搜索</button>
        </div>
        <table class="env-table" id="envTable">
            <thead>
            <tr>
                <th>ID</th>
                <th>区域</th>
                <th>温度(℃)</th>
                <th>湿度(%)</th>
                <th>烟雾浓度(ppm)</th>
                <th>记录时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 数据将通过 AJAX 加载 -->
            </tbody>
        </table>
    </div>

    <!-- 环境参数录入区域 -->
    <div class="input-section">
        <h3 id="envFormTitle">添加环境参数</h3>
        <form id="envParamForm">
            <input type="hidden" id="envParamId" name="id">
            <div class="form-group">
                <label for="envParamArea">区域：</label>
                <input type="text" id="envParamArea" name="envArea" placeholder="如：二楼女装区" required>
            </div>
            <div class="form-group">
                <label for="envParamTemperature">温度(℃)：</label>
                <input type="number" id="envParamTemperature" name="temperature" step="0.1" required>
            </div>
            <div class="form-group">
                <label for="envParamHumidity">湿度(%)：</label>
                <input type="number" id="envParamHumidity" name="humidity" step="0.1" required>
            </div>
            <div class="form-group">
                <label for="envParamSmoke">烟雾浓度(ppm)：</label>
                <input type="number" id="envParamSmoke" name="smokeConcentration" step="0.1" required>
            </div>
            <button type="button" class="add-btn" onclick="saveEnvParam()">保存环境参数</button>
            <button type="button" class="add-btn" onclick="resetEnvForm()">重置</button>
        </form>
    </div>

    <!-- 火灾报警记录区域 -->
    <button class="add-btn" onclick="showAddModal()">添加火灾报警记录</button>

    <table class="alarm-table" id="alarmTable">
        <thead>
        <tr>
            <th>报警ID</th>
            <th>报警类型</th>
            <th>报警参数</th>
            <th>报警值</th>
            <th>阈值</th>
            <th>报警位置</th>
            <th>报警时间</th>
            <th>状态</th>
            <th>关联预案</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 数据将通过 AJAX 加载 -->
        </tbody>
    </table>
</div>

<!-- 新增/编辑弹窗 -->
<div class="modal-mask" id="modalMask">
    <div class="modal">
        <div class="modal-header">
            <span id="modalTitle">添加火灾报警记录</span>
            <span class="modal-close" onclick="closeModal()">&times;</span>
        </div>
        <div class="modal-body">
            <input type="hidden" id="alarmId" />
            <div class="form-group">
                <label for="alarmType">报警类型：</label>
                <input type="text" id="alarmType" placeholder="如：烟雾报警" />
            </div>
            <div class="form-group">
                <label for="alarmArea">报警位置：</label>
                <input type="text" id="alarmArea" placeholder="如：一楼大厅" />
            </div>
            <div class="form-group">
                <label for="alarmParam">报警参数：</label>
                <select id="alarmParam">
                    <option value="温度">温度</option>
                    <option value="湿度">湿度</option>
                    <option value="烟雾浓度">烟雾浓度</option>
                </select>
            </div>
            <div class="form-group">
                <label for="alarmValue">报警值：</label>
                <input type="number" id="alarmValue" step="0.1" placeholder="请输入数值" />
            </div>
            <div class="form-group">
                <label for="alarmTime">报警时间：</label>
                <input type="datetime-local" id="alarmTime" />
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn-cancel" onclick="closeModal()">取消</button>
            <button class="btn-save" onclick="saveAlarm()">保存</button>
        </div>
    </div>
</div>

<!-- 关联预案弹窗 -->
<div class="modal-mask" id="relateModalMask">
    <div class="modal">
        <div class="modal-header">
            <span>关联应急预案</span>
            <span class="modal-close" onclick="closeRelateModal()">&times;</span>
        </div>
        <div class="modal-body">
            <input type="hidden" id="relateAlarmId" />
            <div class="form-group">
                <label for="planSelect">选择应急预案：</label>
                <select id="planSelect" style="width:100%;padding:8px;">
                    <option value="">-- 请选择预案 --</option>
                    <!-- 选项将通过AJAX加载 -->
                </select>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn-cancel" onclick="closeRelateModal()">取消</button>
            <button class="btn-save" onclick="saveRelatePlan()">确定关联</button>
        </div>
    </div>
</div>

<!-- 查看预案弹窗 -->
<div class="modal-mask" id="viewPlanModalMask">
    <div class="modal plan-view-modal">
        <div class="modal-header">
            <span id="viewPlanTitle">查看关联应急预案</span>
            <span class="modal-close" onclick="closeViewPlanModal()">&times;</span>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <h4>预案基本信息</h4>
                <p><strong>预案名称：</strong><span id="viewPlanName"></span></p>
                <p><strong>预案类型：</strong><span id="viewPlanType"></span></p>
                <p><strong>适用区域：</strong><span id="viewPlanArea"></span></p>
            </div>
            <div class="form-group">
                <h4>预案内容</h4>
                <div class="plan-content" id="viewPlanContent"></div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn-cancel" onclick="closeViewPlanModal()">关闭</button>
        </div>
    </div>
</div>

<script>
    // 页面加载时加载报警数据和环境参数数据
    $(document).ready(function() {
        loadAlarmData();
        loadEnvParams();
        resetEnvForm();
    });

    // 加载环境参数列表
    function loadEnvParams(area) {
        area = area || "";
        $.ajax({
            url: "EnvParamServlet",
            method: "GET",
            data: {
                action: "list",
                area: area
            },
            dataType: "json",
            success: function(data) {
                var tbody = $("#envTable tbody");
                tbody.empty();

                if (data.error) {
                    tbody.append("<tr><td colspan='7' style='text-align: center; color: red;'>" + data.error + "</td></tr>");
                    return;
                }

                if (data.length === 0) {
                    tbody.append("<tr><td colspan='7' style='text-align: center; color: #999;'>暂无数据</td></tr>");
                    return;
                }

                // 渲染表格数据
                data.forEach(function(param) {
                    // 处理可能的 null 值
                    let area = param.envArea || "未知区域";
                    let createTime = param.createTime || "无记录";

                    tbody.append(
                        "<tr>" +
                        "<td>" + param.id + "</td>" +
                        "<td>" + area + "</td>" +
                        "<td>" + param.temperature + "</td>" +
                        "<td>" + param.humidity + "</td>" +
                        "<td>" + param.smokeConcentration + "</td>" +
                        "<td>" + createTime + "</td>" +
                        "<td>" +
                        "<button class='operation-btn edit-btn env-operation-btn' onclick=\"editEnvParam(" + param.id + ")\">编辑</button>" +
                        "<button class='operation-btn delete-btn env-operation-btn' onclick=\"deleteEnvParam(" + param.id + ")\">删除</button>" +
                        "</td>" +
                        "</tr>"
                    );
                });
            },
            error: function() {
                $("#envTable tbody").html("<tr><td colspan='7' style='color: red; text-align: center;'>数据加载失败，请稍后重试</td></tr>");
            }
        });
    }

    // 搜索环境参数
    function searchEnvParams() {
        var area = $("#searchEnvArea").val().trim();
        loadEnvParams(area);
    }

    // 重置环境参数表单
    function resetEnvForm() {
        $("#envParamId").val("");
        $("#envParamArea").val("");
        $("#envParamTemperature").val("");
        $("#envParamHumidity").val("");
        $("#envParamSmoke").val("");
        $("#envFormTitle").text("添加环境参数");
    }

    // 编辑环境参数
    function editEnvParam(id) {
        $.ajax({
            url: "EnvParamServlet",
            method: "GET",
            data: {
                action: "get",
                id: id
            },
            dataType: "json",
            success: function(data) {
                if (data.error) {
                    alert(data.error);
                    return;
                }

                // 填充表单数据
                $("#envParamId").val(data.id);
                $("#envParamArea").val(data.envArea || "");
                $("#envParamTemperature").val(data.temperature || "");
                $("#envParamHumidity").val(data.humidity || "");
                $("#envParamSmoke").val(data.smokeConcentration || "");
                $("#envFormTitle").text("编辑环境参数");
            },
            error: function() {
                alert("获取数据失败，请重试");
            }
        });
    }

    // 删除环境参数
    function deleteEnvParam(id) {
        if (!confirm("确定要删除这条环境参数记录吗？")) {
            return;
        }

        $.ajax({
            url: "EnvParamServlet",
            method: "GET",
            data: {
                action: "delete",
                id: id
            },
            dataType: "json",
            success: function(res) {
                if (res.success) {
                    alert("删除成功");
                    loadEnvParams();
                } else {
                    alert("删除失败：" + (res.error || "未知错误"));
                }
            },
            error: function() {
                alert("网络异常，请重试");
            }
        });
    }

    // 保存环境参数
    function saveEnvParam() {
        var id = $("#envParamId").val();
        var area = $("#envParamArea").val().trim();
        var temperature = $("#envParamTemperature").val().trim();
        var humidity = $("#envParamHumidity").val().trim();
        var smoke = $("#envParamSmoke").val().trim();

        // 表单验证
        if (!area || !temperature || !humidity || !smoke) {
            alert("请填写完整信息");
            return;
        }

        if (isNaN(temperature) || isNaN(humidity) || isNaN(smoke)) {
            alert("请输入有效的数值");
            return;
        }

        var url = "EnvParamServlet";
        var data = {
            action: id ? "update" : "add",
            id: id,
            envArea: area,
            temperature: temperature,
            humidity: humidity,
            smokeConcentration: smoke
        };

        $.ajax({
            url: url,
            method: "POST",
            data: data,
            dataType: "json",
            success: function(res) {
                if (res.success) {
                    alert(id ? "更新成功" : "添加成功");
                    resetEnvForm();
                    loadEnvParams();
                } else {
                    alert("操作失败：" + (res.error || "未知错误"));
                }
            },
            error: function() {
                alert("网络异常，请重试");
            }
        });
    }

    // 加载报警数据
    function loadAlarmData() {
        $.get("AlarmInfoServlet?action=list", function(data) {
            var tbody = $("#alarmTable tbody");
            tbody.empty();
            if (typeof data === "string") {
                data = JSON.parse(data);
            }

            if (data.error) {
                tbody.append("<tr><td colspan='10' style='text-align: center; color: red;'>" + data.error + "</td></tr>");
                return;
            }

            if (data.length === 0) {
                tbody.append("<tr><td colspan='10' style='text-align: center; color: #999;'>暂无报警记录</td></tr>");
                return;
            }

            data.forEach(function(alarm) {
                var statusClass = alarm.status === "待处理" ? "status-alert" : "status-normal";

                // 获取关联的预案信息
                getPlanNameByAlarmId(alarm.id, function(planName) {
                    var planInfo = planName ? planName : "未关联";
                    var relateHtml = planName ?
                        "<button class='operation-btn view-btn' onclick=\"viewRelatedPlan(" + alarm.id + ")\">查看预案</button>" :
                        "<button class='operation-btn relate-btn' onclick=\"showRelatePlanModal(" + alarm.id + ")\">关联预案</button>";

                    tbody.append(
                        "<tr>" +
                        "<td>" + alarm.id + "</td>" +
                        "<td>" + alarm.alarmType + "</td>" +
                        "<td>" + alarm.alarmParam + "</td>" +
                        "<td>" + alarm.alarmValue + "</td>" +
                        "<td>" + alarm.thresholdValue + "</td>" +
                        "<td>" + alarm.alarmArea + "</td>" +
                        "<td>" + alarm.alarmTime + "</td>" +
                        "<td><span class='" + statusClass + "'>" + alarm.status + "</span></td>" +
                        "<td>" + planInfo + "</td>" +
                        "<td>" +
                        "<button class='operation-btn edit-btn' onclick=\"editAlarm(" + alarm.id + ")\">编辑</button>" +
                        "<button class='operation-btn delete-btn' onclick=\"deleteAlarm(" + alarm.id + ")\">删除</button>" +
                        "<button class='operation-btn handle-btn' onclick=\"handleAlarm(" + alarm.id + ")\">" +
                        (alarm.status === "待处理" ? "处理" : "重新处理") + "</button>" +
                        relateHtml +
                        "</td>" +
                        "</tr>"
                    );
                });
            });
        }).fail(function() {
            $("#alarmTable tbody").html("<tr><td colspan='10' style='color: red; text-align: center;'>数据加载失败，请稍后重试</td></tr>");
        });
    }

    // 获取报警关联的预案名称
    function getPlanNameByAlarmId(alarmId, callback) {
        $.get("EmergencyPlanServlet?action=getByAlarm&alarmId=" + alarmId, function(data) {
            if (typeof data === "string") {
                data = JSON.parse(data);
            }
            if (data.length > 0) {
                callback(data[0].planName);
            } else {
                callback("");
            }
        }).fail(function() {
            callback("");
        });
    }

    // 显示添加弹窗
    function showAddModal() {
        $("#modalTitle").text("添加火灾报警记录");
        $("#alarmId").val("");
        $("#alarmType").val("");
        $("#alarmArea").val("");
        $("#alarmParam").val("温度");
        $("#alarmValue").val("");

        // 设置默认时间为当前时间
        var now = new Date();
        var year = now.getFullYear();
        var month = (now.getMonth() + 1).toString().padStart(2, '0');
        var day = now.getDate().toString().padStart(2, '0');
        var hours = now.getHours().toString().padStart(2, '0');
        var minutes = now.getMinutes().toString().padStart(2, '0');
        var datetime = year + "-" + month + "-" + day + "T" + hours + ":" + minutes;
        $("#alarmTime").val(datetime);

        $("#modalMask").css("display", "flex");
    }

    // 关闭弹窗
    function closeModal() {
        $("#modalMask").css("display", "none");
    }

    // 保存报警记录
    function saveAlarm() {
        var id = $("#alarmId").val();
        var alarmType = $("#alarmType").val();
        var alarmArea = $("#alarmArea").val();
        var alarmParam = $("#alarmParam").val();
        var alarmValue = $("#alarmValue").val();
        var alarmTime = $("#alarmTime").val();

        if (!alarmType || !alarmArea || !alarmValue || !alarmTime) {
            alert("请填写完整信息");
            return;
        }

        var url = id ? "AlarmInfoServlet?action=update" : "AlarmInfoServlet?action=add";
        var data = {
            id: id,
            alarmType: alarmType,
            alarmArea: alarmArea,
            alarmParam: alarmParam,
            alarmValue: alarmValue,
            alarmTime: alarmTime
        };

        $.post(url, data, function(res) {
            if (typeof res === "string") {
                res = JSON.parse(res);
            }
            if (res.success) {
                alert(id ? "更新成功" : "添加成功");
                closeModal();
                loadAlarmData();
            } else {
                alert("操作失败：" + res.error);
            }
        }).fail(function() {
            alert("网络异常，请重试");
        });
    }

    // 编辑报警记录
    function editAlarm(id) {
        $.get("AlarmInfoServlet?action=get&id=" + id, function(data) {
            if (typeof data === "string") {
                data = JSON.parse(data);
            }
            if (data.error) {
                alert(data.error);
                return;
            }

            $("#modalTitle").text("编辑火灾报警记录");
            $("#alarmId").val(data.id);
            $("#alarmType").val(data.alarmType);
            $("#alarmArea").val(data.alarmArea);
            $("#alarmParam").val(data.alarmParam);
            $("#alarmValue").val(data.alarmValue);

            // 转换时间格式为 yyyy-MM-ddTHH:mm
            var timeStr = data.alarmTime;
            if (timeStr && timeStr.length >= 16) {
                timeStr = timeStr.substring(0, 10) + "T" + timeStr.substring(11, 16);
                $("#alarmTime").val(timeStr);
            }

            $("#modalMask").css("display", "flex");
        }).fail(function() {
            alert("获取数据失败，请重试");
        });
    }

    // 删除报警记录
    function deleteAlarm(id) {
        if (!confirm("确定要删除这条报警记录吗？")) {
            return;
        }

        $.get("AlarmInfoServlet?action=delete&id=" + id, function(res) {
            if (typeof res === "string") {
                res = JSON.parse(res);
            }
            if (res.success) {
                alert("删除成功");
                loadAlarmData();
            } else {
                alert("删除失败：" + res.error);
            }
        }).fail(function() {
            alert("网络异常，请重试");
        });
    }

    // 处理报警
    function handleAlarm(id) {
        var handler = prompt("请输入处理人员姓名：");
        if (!handler) {
            return;
        }

        $.post("AlarmInfoServlet", {
            action: "handle",
            id: id,
            handler: handler
        }, function(res) {
            if (typeof res === "string") {
                res = JSON.parse(res);
            }
            if (res.success) {
                alert("处理成功");
                loadAlarmData();
            } else {
                alert("处理失败：" + res.error);
            }
        }).fail(function() {
            alert("网络异常，请重试");
        });
    }

    // 显示关联预案弹窗
    function showRelatePlanModal(alarmId) {
        $("#relateAlarmId").val(alarmId);
        // 加载所有可用预案
        $.ajax({
            url: "EmergencyPlanServlet?action=list&type=&area=",
            dataType: "json",
            success: function(data) {
                var select = $("#planSelect");
                select.html("<option value=''>-- 请选择预案 --</option>");

                if (data.length > 0 && !data.error) {
                    data.forEach(function(plan) {
                        if (plan.status === "启用") {
                            select.append("<option value='" + plan.id + "'>" + plan.planName + "（" + plan.planType + "）</option>");
                        }
                    });
                }
                $("#relateModalMask").css("display", "flex");
            },
            error: function() {
                alert("加载预案失败，请重试");
            }
        });
    }

    // 关闭关联预案弹窗
    function closeRelateModal() {
        $("#relateModalMask").css("display", "none");
    }

    // 保存关联关系
    function saveRelatePlan() {
        var alarmId = $("#relateAlarmId").val();
        var planId = $("#planSelect").val();

        if (!planId) {
            alert("请选择应急预案");
            return;
        }

        $.ajax({
            url: "EmergencyPlanServlet",
            method: "POST",
            data: {
                action: "relate",
                alarmId: alarmId,
                planId: planId
            },
            dataType: "json",
            success: function(res) {
                if (res.success) {
                    alert("关联成功");
                    closeRelateModal();
                    loadAlarmData();
                } else {
                    alert("关联失败：" + (res.error || "未知错误"));
                }
            },
            error: function() {
                alert("网络异常，请重试");
            }
        });
    }

    // 查看关联的预案
    function viewRelatedPlan(alarmId) {
        $.get("EmergencyPlanServlet?action=getByAlarm&alarmId=" + alarmId, function(data) {
            if (typeof data === "string") {
                data = JSON.parse(data);
            }

            if (data.error) {
                alert(data.error);
                return;
            }

            if (data.length === 0) {
                alert("未找到关联的预案");
                return;
            }

            var plan = data[0];
            $("#viewPlanTitle").text("关联应急预案：" + plan.planName);
            $("#viewPlanName").text(plan.planName);
            $("#viewPlanType").text(plan.planType);
            $("#viewPlanArea").text(plan.applicableArea);
            $("#viewPlanContent").text(plan.content);

            $("#viewPlanModalMask").css("display", "flex");
        }).fail(function() {
            alert("获取预案失败，请重试");
        });
    }

    // 关闭查看预案弹窗
    function closeViewPlanModal() {
        $("#viewPlanModalMask").css("display", "none");
    }
</script>
</body>
</html>